use crate::components::EditorApi;
use crate::models::NoteProfile;
use stylist::yew::styled_component;
use yew::prelude::*;

#[derive(Properties, PartialEq)]
pub struct EntryProps {
    pub profile_list: Vec<NoteProfile>,
    #[prop_or_default]
    pub handle_profile_click: Callback<u64>,
    #[prop_or_default]
    pub handle_delete_note: Callback<u64>,
}

#[derive(Properties, PartialEq)]
pub struct ProfileProps {
    pub profile: NoteProfile,
    #[prop_or_default]
    pub onclick: Callback<u64>,
    #[prop_or_default]
    pub on_delete_note: Callback<u64>,
}
#[styled_component]
fn Profile(props: &ProfileProps) -> Html {
    let profile = props.profile.clone();
    let profile1 = props.profile.clone();
    let onclick = props.onclick.clone();
    let on_delete_note = props.on_delete_note.clone();
    html! {
        <div  class={classes!("row", "content-space-between", "align-center", "margin-small", "padding-small", "border-radius-small",css!(r#"
            border: 1px solid #e0eee8;
            height: 40px;
            :hover {
              height: 60px;
              background-color: #c0ebd7;
              cursor: default;
            }
        "#))}>
            <div class={classes!("margin-small", css!(r#"
            :hover {
                cursor: pointer;
            }
                    "#))} onclick={move |_|onclick.emit(profile.id)}>
                {profile.title.clone()}
            </div>
            <div class={classes!("margin-small")}>
                <button onclick={move|_|on_delete_note.emit(profile1.id)} class={css!(r#"
                            background-color: red;
                            color: white;
                            border: none;
                            border-radius: 5px;
                            padding: 5px 5px;
                        "#)}>{"删除"}</button>
            </div>
        </div>
    }
}
fn render_profiles(
    profile_list: &[NoteProfile],
    handle_click: &Callback<u64>,
    handle_delete_note: &Callback<u64>,
) -> Html {
    html! {
        <>
        {
            profile_list.iter().map(|profile| html!{
                <Profile profile={profile.clone()} onclick={handle_click} on_delete_note={handle_delete_note}/>
            }).collect::<Html>()
        }
        </>
    }
}

#[styled_component]
pub fn Entry(props: &EntryProps) -> Html {
    let handle_click = props.handle_profile_click.clone();
    let handle_delete_note = props.handle_delete_note.clone();
    html! {
        <div class={classes!("column", css!(r#"
                width: 100%;
                padding: 5px 5px;
                height: 100vh;
        "#))}>
            <div class={classes!("header")}>
                <div class={classes!("row", css!(r#"
                        width: 100%;
                        padding: 5px 5px;
                        border: none;

                        input {
                            box-sizing: border-box;
                            line-height: 24px;
                            font-size: 18px;
                            width: 100%;
                            border: 1px solid gray;
                            border-radius: 4px;
                        }
                        button {
                            border: none;
                            border-radius: 12px;
                            width: 30px;
                            height: 30px;
                            line-height: 30px;
                        }
                "#))}>
                    // 搜索框
                    <input id={EditorApi::SEARCH_TEXT_ID} placeholder="搜索标题"/>
                    // 搜索框
                </div>
            </div>
            <div class={classes!("flex-grow", css!(r#"
                overflow:scroll;
            "#))}>
                <div class={classes!("column","padding-middle", css!(r#"
                    margin-top: 20px;
                    margin-bottom: 10px;
                    padding: 5px 10px;
                "#))}>
                    {
                        render_profiles(&props.profile_list, &handle_click, &handle_delete_note)
                    }
                </div>
            </div>
        </div>
    }
}
